<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' :maxlength="30" show-count />
        </a-form-item>
        <a-form-item name='profitRate' :rules="[{required : true, message : '请填写费率'}]">
            <template #label>
                费率
                <a-tooltip>
                    <template #title>费率在0-1之间，且最多保留两位小数</template>
                    <QuestionCircleOutlined class="m-l-5" />
                </a-tooltip>
            </template>
            <a-input-number :controls="false" :min="0" :max="1" v-model:value.number='formData.profitRate' :precision="2">
                <template #addonAfter>* 100%</template>
            </a-input-number>
        </a-form-item>
        <template v-if="formData.id == 0">
            <a-form-item label='管理员账号' name='adminAccount' :rules="[{required : true, message : '请填写管理员账号'}]">
                <a-input v-model:value='formData.adminAccount' :maxlength="30" show-count />
            </a-form-item>
            <a-form-item label='管理员名称' name='adminName'>
                <a-input v-model:value='formData.adminName' :maxlength="10" show-count />
            </a-form-item>
            
            <a-form-item label='管理员密码' name='adminPassword' :rules="[{required : false, validator : pwdValidator}]">
                <a-input-password v-model:value='formData.adminPassword' :maxlength="30" show-count />
            </a-form-item>
        </template>
        <a-form-item label='角色' name='roles'>
            <a-select v-model:value="formData.roles" :options="roleOptions"  mode="multiple" style="width: 100%" :field-names="{ label: 'name', value: 'id'}" />
        </a-form-item>
        <a-form-item label='手机号码' name='tel'>
            <a-input type='text' v-model:value='formData.tel' :maxlength="11" show-count />
        </a-form-item>
        <!-- <a-form-item label='备注' name='remark'>
            <a-input type='text' v-model:value='formData.remark' :maxlength="100" show-count />
        </a-form-item> -->
        <a-form-item label='启用' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='启用' un-checked-children='禁用'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
    import { saveApi } from '@/api/Merchant';
    import { optionsApi as roleListApi} from '@/api/system/Role'
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Rule } from 'ant-design-vue/es/form';
    import { ref } from 'vue';
    

    const props = defineProps<{
        row? : any
    }>()


    const formRef = ref()
    const depts = ref<any[]>([])
    let bakData:any = {}

    const roleOptions = ref<any[]>([])

    
    const formData = ref({
        id : 0,
        name : '',
        tel : '',
        profitRate : [],
        remark : '',
        enable : true,
        roles : [],
        adminAccount : '',
        adminName : '',
        adminPassword : ''

    })
    


    const pwdValidator = async (_rule: Rule, value: string) => {
        
        if(value.length > 0) {
            if(value.length < 6) {
                return Promise.reject("密码长度至少6位");
            }
        }

    
        return Promise.resolve()
    }

    if(props.row) {
        bakData = {...props.row}
        for(let k in props.row) {
            if(props.row[k] !== null) {
                if(k in formData.value) {
                    if(k == 'deptId') {
                        formData.value[k] = props.row[k] || ''
                    }else {
                        formData.value[k] = props.row[k]
                    }
                    
                }
            }
            
        }

        formData.value.roles = props.row.admin.roles
    }


    async function submit() {
        let params  = await formRef.value.validate()
        if(params.password === '') {
            delete params.password
        }

        params.profitRate = Number(params.profitRate)

        return saveApi(params)
    }

    defineExpose({
        submit
    })

    // deptApi().then(r => {
    //     depts.value = recursionFn(r.data, 0, 'id', 'parentId', 'children')
    // })

    roleListApi().then(res => {
        if(res.data) {
            roleOptions.value = res.data
        }
        
    })
</script>